<template>
  <div>
    <el-card>
      <!--文章标题-->
      <div class="aricle-content-title" v-text='articleContent.title'></div>
      <!--标签查看点赞评论搜藏-->
      <div class="article-operator">
        <div>
          <span>板块来自：</span>
          <span class="article-operator-pretag">{{articleContent.tag_name }}</span>
        </div>
        <div class="article-operator-view-comment-like-collect">
          <!--观看数量-->
          <div>
            <font-awesome-icon :icon="['far', 'eye']" style="width:16px;height: 16px"></font-awesome-icon>
            <span>{{getArticleActionAndConfigOfState.view_count}}</span>
          </div>
          <!--评论数量-->
          <div>
            <font-awesome-icon :icon="['far', 'comment-dots']"></font-awesome-icon>
            <span>{{getArticleActionAndConfigOfState.comment_count}}</span>
          </div>
          <!--点赞数量-->
          <div>
            <font-awesome-icon :icon="['far', 'thumbs-up']"></font-awesome-icon>
            <span>{{getArticleActionAndConfigOfState.fabulous_count}}</span>
          </div>
          <!--收藏数量-->
          <div>
            <font-awesome-icon :icon="['far', 'star']"></font-awesome-icon>
            <span>{{getArticleActionAndConfigOfState.collection_count}}</span>
          </div>
        </div>
      </div>
      <!--发表时间-->
      <div class="article-operator-time">
        <span>文章发表：</span>
        <span v-text='articleContent.creat_time'></span>
      </div>
      <!--正文内容-->
      <div v-html="articleContent.content"></div>
      <div class="article-operator-report">举报</div>
    </el-card>
  </div>
</template>

<script>
import { GetUrlParam } from '../../utils/getUrlParams'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      articleContent: {},
      config: {}, // 文章配置
      // content: {}, // 文章内容
      time: {
        timer: null, // 定时器
        timerStep: 100, // 定时器步长
        readDuration: 0, // 阅读时长
        percentage: 0, // 阅读比例
        loadDuration: 0, // 加载时长
        loadOff: true// 加载完成控制
      }, // 时间相关属性
      test: {
        isforward: false // 是否转发
      },
      // 文章参数
      EssayParam: {
        equipment_id: '',
        article_id: '',
        author_id: null
      }
      // 点赞参数
      // LikeParam: { articleId: this.id, operation: this.relation.islike ? 1 : 0 }
    }
  },
  created () {
    this.EssayParam.equipment_id = sessionStorage.getItem('EQUIPMENTID_KEY')
    this.EssayParam.article_id = GetUrlParam('articleid')
    this.getEssay()
    // this.setArticleActionConfig()
  },
  beforeMount () {},
  // DOM对象加载完成时
  mounted () {},
  methods: {
    // ...mapMutations(['', '']),
    // 获取文章性息
    async getEssay () {
      const url = this.$config.urls.get('load_article_Info')
      // console.log(this.Param)
      const { data: res } = await this.$http.post(url, this.EssayParam)
      if (res.code !== 0) {
        this.$message.error('获取数据失败')
        console.log(res)
      } else {
        res.data.apArticleContentInfo.creat_time = this.$date.diffTime(res.data.apArticleContentInfo.creat_time)
        this.articleContent = res.data.apArticleContentInfo
        // console.log(res.data)
        // console.log(this.articleContent)
      }
    }
  },
  computed: {
    ...mapGetters('HomePage', { getArticleActionAndConfigOfState: 'getArticleActionAndConfigOfState' })
    // ...mapState(['articleActionList'])
  },
  name: 'articleContent',
  components: {}
}
</script>

<style lang="less" scoped>
.aricle-content-title{
  font-size: 20px;
  font-weight: 600;
}
.article-operator{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  background-color: #f7f8fc;
  height: 45px;
  margin:10px 0;
}
.article-operator-pretag{
  color: #ffbf00;
}
.article-operator-view-comment-like-collect{
  display: flex;
  justify-content: flex-end;
  div{
    margin:0 10px;
  }
}
.article-operator-time{
  display: flex;
  justify-content: center;
  color: #999999;
}
.article-operator-report{
  margin: 30px;
  display: flex;
  justify-content: flex-end;
  color: #999999;
}

</style>
